/**
 * sticker选择器基类 
 * @param {Object} $wrapper
 * @param {Object} cfg
 */
function IconSelector($wrapper, cfg) {
    var _this = this;
    this.$wrapper = $wrapper;
    
    this.config = $.extend({}, cfg);
    
    Observable.enable(this);
    
    var iconCls = _this.config['iconCls'] || 'iconItem',
        backgroundBg = 'url({0}) no-repeat'.format(_this.config['iconBg']),
        lastRowIndex = _this.config['iconCount'] - _this.config['iconCount'] % _this.config['rowIconCount'];

    this.$wrapper.css({
        background : backgroundBg,
        width : _this.config['width']
    });
    
    for (var i = 1; i < _this.config['iconCount'] + 1; i++) {
        var isRightMostIcon = i % _this.config['rowIconCount'] === 0 || i === _this.config['iconCount'],
            isBottomMostIcon = i > lastRowIndex,
            $iconItem = $('<a title="" class="{0}" href="javascript:void(0);" index="{1}"></a>'.format(iconCls,i));
        
        $iconItem.css({
            width : _this.config['itemWidth'],
            height : _this.config['itemHeight'],
            marginRight : _this.config['cellPadding'],
            marginBottom : _this.config['cellPadding']
        });
        
        if(isRightMostIcon){
            $iconItem.addClass('borderRightNone').css({
                marginRight : 0
            });
        }
        
        if(isBottomMostIcon){
            $iconItem.addClass('borderBottomNone').css({
                marginBottom : 0
            });
        }
        
        this.$wrapper.append($iconItem);    
    }    

    this.$wrapper.delegate('> a', 'click', function() {
        var $item = $(this),
            index = parseInt($item.attr('index')),
            rows = index / _this.config['rowIconCount'],
            yushu = index % _this.config['rowIconCount'];
        
        var bgPosLeft = -(((yushu || _this.config['rowIconCount']) - 1) * (_this.config['itemHeight'] + 1));
            bgPosTop = -(parseInt( yushu ? rows : rows - 1) * (_this.config['itemWidth'] + 1));
        
        _this.fire('itemClick', {
            name : _this.config['name'],
            index : index - 1,
            width : _this.config['itemWidth'],
            height : _this.config['itemHeight'],
            bg : backgroundBg,
            left : bgPosLeft, 
            top : bgPosTop 
        });
    });
}